<template>
  <div class="body">
    <el-row :gutter="20" class="line1">
        <el-col :span="8" class="col">
            <div class="item">
                <div class="module_title">企业数量</div>
                <cityCharts1></cityCharts1>
            </div>
        </el-col>
        <el-col :span="8" class="col">
            <div class="item">
                <div class="module_title">国内龙头企业</div>
                <div class="select_box">
                    <p class="text">2022年报</p>
                    <el-select v-model="city1" class="select">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="gnlt_title">
                    <div>企业简称</div>
                    <div>城市</div>
                    <div>营业收入</div>
                    <div>利润总额</div>
                    <div>资产回报率</div>
                </div>
                <div class="gnlt_contan_box">
                    <div class="">
                        <div class="gnlt_nav" v-for="(item, index) in gnList1" :key="index">
                            <div>{{ item.cs }}</div>
                            <div>
                                <div class="gnlt_area" :title="item.jc">{{ item.jc }}</div>
                            </div>
                            <div>{{ item.num1 }}</div>
                            <div>{{ item.num2 }}</div>
                            <div>{{ item.num3 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="8" class="col">
            <div class="item">
                <div class="module_title">苏州龙头企业</div>
                <div class="select_box">
                    <p class="text">2022年报</p>
                    <el-select v-model="city2" class="select">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="gnlt_title">
                    <div>企业简称</div>
                    <div>区县</div>
                    <div>营业收入</div>
                    <div>利润总额</div>
                    <div>资产回报率</div>
                    <div>营收对标率</div>
                </div>
                <div class="gnlt_contan_box">
                    <div class="">
                        <div class="gnlt_nav" v-for="(item, index) in gnList2" :key="index">
                            <div>{{ item.cs }}</div>
                            <div>
                                <div class="gnlt_area" :title="item.jc">{{ item.jc }}</div>
                            </div>
                            <div>{{ item.num1 }}</div>
                            <div>{{ item.num2 }}</div>
                            <div>{{ item.num3 }}</div>
                            <div>{{ item.num4 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="20" class="line1">
        <el-col :span="8" class="col">
            <div class="item">
                <div class="module_title">专利申请</div>
                <cityCharts2></cityCharts2>
            </div>
        </el-col>
        <el-col :span="8" class="col">
            <div class="item">
                <div class="module_title">企业融资</div>
                <cityCharts3 :data="enterpriseFinancing"></cityCharts3>
            </div>
        </el-col>
        <el-col :span="8" class="col">
            <div class="item">
                <div class="module_title">资质认定</div>
                <cityCharts4 :data="qualificationRecognition"></cityCharts4>
            </div>
        </el-col>
    </el-row>
  </div>
</template>
  
<script>
import cityCharts1 from "./cityCharts1.vue";
import cityCharts2 from "./cityCharts2.vue";
import cityCharts3 from "./cityCharts3.vue";
import cityCharts4 from "./cityCharts4.vue";
export default {
    components: {
        cityCharts1,
        cityCharts2,
        cityCharts3,
        cityCharts4,
    },
    data(){
        return{
            options1: [{
                    value: '',
                    label: '全部城市'
                }, {
                    value: '选项1',
                    label: '北京'
                }, {
                    value: '选项2',
                    label: '上海'
                }, {
                    value: '选项3',
                    label: '广州'
                }, {
                    value: '选项4',
                    label: '深圳'
                }, {
                    value: '选项5',
                    label: '苏州'
            }],
            city1: '',
            gnList1: [
                { cs: '工业富联', jc: '深圳市', num1: '5118 ', num2: '201 ', num3: '7.9%' },
                { cs: '立讯精密', jc: '深圳市', num1: '2140 ', num2: '105 ', num3: '8.7%' },
                { cs: '京东方A', jc: '北京市', num1: '1784 ', num2: '-17 ', num3: '0.5%' },
                { cs: 'TCL科技', jc: '惠州市', num1: '1666 ', num2: '18 ', num3: '1.4%' },
                { cs: '神州数码', jc: '深圳市', num1: '1159 ', num2: '10 ', num3: '4.2%' },
                { cs: '歌尔股份', jc: '潍坊市', num1: '1049 ', num2: '18 ', num3: '2.3%' },
                { cs: '厦门信达', jc: '厦门市', num1: '940 ', num2: '2 ', num3: '4.0%' },
                { cs: '海康威视', jc: '杭州市', num1: '832 ', num2: '136 ', num3: '12.8%' },
                { cs: '上海钢联', jc: '上海市', num1: '766 ', num2: '3 ', num3: '3.4%' },
                { cs: '浪潮信息', jc: '济南市', num1: '695 ', num2: '21 ', num3: '5.5%' },
                { cs: '环旭电子', jc: '上海市', num1: '685 ', num2: '31 ', num3: '9.7%' },
                { cs: '冠捷科技', jc: '南京市', num1: '619 ', num2: '2 ', num3: '2.4%' },
                { cs: '闻泰科技', jc: '黄石市', num1: '581 ', num2: '14 ', num3: '3.6%' },
                { cs: '欣旺达', jc: '深圳市', num1: '522 ', num2: '8 ', num3: '1.5%' },
                { cs: '均胜电子', jc: '宁波市', num1: '498 ', num2: '2 ', num3: '2.5%' },
                { cs: '中芯国际', jc: '上海市', num1: '495 ', num2: '147 ', num3: '4.9%' },
                { cs: '蓝思科技', jc: '浏阳市', num1: '467 ', num2: '25 ', num3: '4.4%' },
                { cs: '传音控股', jc: '深圳市', num1: '466 ', num2: '25 ', num3: '9.3%' },
                { cs: '中电港', jc: '深圳市', num1: '433 ', num2: '4 ', num3: '4.4%' },
                { cs: '国联股份', jc: '北京市', num1: '403 ', num2: '13 ', num3: '15.9%' },
                { cs: '鹏鼎控股', jc: '深圳市', num1: '362 ', num2: '50 ', num3: '15.0%' },
                { cs: '太极实业', jc: '无锡市', num1: '352 ', num2: '-7 ', num3: '-1.7%' },
                { cs: '领益智造', jc: '江门市', num1: '345 ', num2: '16 ', num3: '6.5%' },
                { cs: '长电科技', jc: '江阴市', num1: '338 ', num2: '32 ', num3: '9.1%' },
                { cs: '东山精密', jc: '苏州市', num1: '316 ', num2: '24 ', num3: '8.1%' },
                { cs: '深天马A', jc: '深圳市', num1: '314 ', num2: '1 ', num3: '1.1%' },
                { cs: '大华股份', jc: '杭州市', num1: '306 ', num2: '23 ', num3: '4.9%' },
                { cs: '迈瑞医疗', jc: '深圳市', num1: '304 ', num2: '96 ', num3: '25.0%' },
                { cs: '纳思达', jc: '珠海市', num1: '259 ', num2: '21 ', num3: '6.3%' },
                { cs: '通富微电', jc: '南通市', num1: '214 ', num2: '5 ', num3: '2.7%' }
            ],
            options2: [{
                    value: '',
                    label: '全部城市'
                }, {
                    value: '选项1',
                    label: '吴中区'
                }, {
                    value: '选项2',
                    label: '高新区'
                }, {
                    value: '选项3',
                    label: '相城区'
                }, {
                    value: '选项4',
                    label: '吴江区'
                }, {
                    value: '选项5',
                    label: '姑苏区'
                }, {
                    value: '选项6',
                    label: '工业园区'
                }, {
                    value: '选项7',
                    label: '昆山市'
                }, {
                    value: '选项8',
                    label: '常熟市'
                }, {
                    value: '选项9',
                    label: '太仓市'
                }, {
                    value: '选项10',
                    label: '张家港市'
            }],
            city2: '',
            gnList2:[
                { cs: '东山精密', jc: '吴中区', num1: '316 ', num2: '24 ', num3: '8.1%', num4: '6.2%' },
                { cs: '天华新能', jc: '工业园区', num1: '170 ', num2: '88 ', num3: '77.8%', num4: '3.3%' },
                { cs: '沪电股份', jc: '昆山市', num1: '83 ', num2: '14 ', num3: '12.2%', num4: '1.6%' },
                { cs: '维信诺', jc: '昆山市', num1: '75 ', num2: '-26 ', num3: '-5.9%', num4: '1.5%' },
                { cs: '龙腾光电', jc: '昆山市', num1: '42 ', num2: '3 ', num3: '3.8%', num4: '0.8%' },
                { cs: '安洁科技', jc: '吴中区', num1: '42 ', num2: '2 ', num3: '3.4%', num4: '0.8%' },
                { cs: '春秋电子', jc: '昆山市', num1: '38 ', num2: '1 ', num3: '4.0%', num4: '0.8%' },
                { cs: '科森科技', jc: '昆山市', num1: '34 ', num2: '1 ', num3: '2.8%', num4: '0.7%' },
                { cs: '苏州固锝', jc: '高新区', num1: '33 ', num2: '4 ', num3: '13.4%', num4: '0.6%' },
                { cs: '赛腾股份', jc: '吴中区', num1: '29 ', num2: '3 ', num3: '8.6%', num4: '0.6%' },
                { cs: '新点软件', jc: '张家港市', num1: '28 ', num2: '6 ', num3: '8.7%', num4: '0.6%' },
                { cs: '聚灿光电', jc: '工业园区', num1: '20 ', num2: '-1 ', num3: '-2.2%', num4: '0.4%' },
                { cs: '易德龙', jc: '相城区', num1: '20 ', num2: '2 ', num3: '10.6%', num4: '0.4%' },
                { cs: '思瑞浦', jc: '工业园区', num1: '18 ', num2: '3 ', num3: '6.7%', num4: '0.3%' },
                { cs: '上声电子', jc: '相城区', num1: '18 ', num2: '1 ', num3: '5.4%', num4: '0.3%' },
                { cs: '晶瑞电材', jc: '吴中区', num1: '17 ', num2: '2 ', num3: '6.9%', num4: '0.3%' },
                { cs: '苏大维格', jc: '工业园区', num1: '17 ', num2: '-3 ', num3: '-9.0%', num4: '0.3%' },
                { cs: '纳芯微', jc: '工业园区', num1: '17 ', num2: '3 ', num3: '6.2%', num4: '0.3%' },
                { cs: '瑞可达', jc: '吴中区', num1: '16 ', num2: '3 ', num3: '12.3%', num4: '0.3%' },
                { cs: '南大光电', jc: '工业园区', num1: '16 ', num2: '3 ', num3: '6.4%', num4: '0.3%' },
                { cs: '苏州科达', jc: '高新区', num1: '16 ', num2: '-6 ', num3: '-14.7%', num4: '0.3%' },
                { cs: '恒铭达', jc: '昆山市', num1: '15 ', num2: '2 ', num3: '9.7%', num4: '0.3%' },
                { cs: '锦富技术', jc: '工业园区', num1: '14 ', num2: '-2 ', num3: '-6.8%', num4: '0.3%' },
                { cs: '伟时电子', jc: '昆山市', num1: '14 ', num2: '1 ', num3: '6.2%', num4: '0.3%' },
                { cs: '银河电子', jc: '张家港市', num1: '13 ', num2: '2 ', num3: '5.5%', num4: '0.3%' },
                { cs: '同享科技', jc: '吴江区', num1: '12 ', num2: '1 ', num3: '8.9%', num4: '0.2%' },
                { cs: '瑞玛精密', jc: '高新区', num1: '12 ', num2: '1 ', num3: '5.4%', num4: '0.2%' },
                { cs: '东微半导', jc: '工业园区', num1: '11 ', num2: '3 ', num3: '16.9%', num4: '0.2%' },
                { cs: '快可电子', jc: '工业园区', num1: '11 ', num2: '1 ', num3: '11.8%', num4: '0.2%' },
                { cs: '清越科技', jc: '昆山市', num1: '10 ', num2: '0 ', num3: '3.2%', num4: '0.2%' }
            ],

            enterpriseFinancing: [
                {
                    "融资城市": "苏州",
                    "近3个月内有融资企业数量": 23,
                    "IPO辅导企业": 15,
                    "A股上市企业": 77
                },
                {
                    "融资城市": "上海",
                    "近3个月内有融资企业数量": 31,
                    "IPO辅导企业": 25,
                    "A股上市企业": 98
                },
                {
                    "融资城市": "深圳",
                    "近3个月内有融资企业数量": 31,
                    "IPO辅导企业": 45,
                    "A股上市企业": 198
                },
                {
                    "融资城市": "杭州",
                    "近3个月内有融资企业数量": 19,
                    "IPO辅导企业": 21,
                    "A股上市企业": 75
                },
                {
                    "融资城市": "南京",
                    "近3个月内有融资企业数量": 12,
                    "IPO辅导企业": 8,
                    "A股上市企业": 33
                },
                {
                    "融资城市": "成都",
                    "近3个月内有融资企业数量": 16,
                    "IPO辅导企业": 6,
                    "A股上市企业": 30
                },
                {
                    "融资城市": "武汉",
                    "近3个月内有融资企业数量": 6,
                    "IPO辅导企业": 8,
                    "A股上市企业": 26
                }
            ],  // 企业融资
            qualificationRecognition: [
                {
                    "资质认定城市": "苏州",
                    "高新企业数量": 1627,
                    "科技型中小企业数量": 1334,
                    "专精特新企业数量": 170
                },
                {
                    "资质认定城市": "上海",
                    "高新企业数量": 2476,
                    "科技型中小企业数量": 1522,
                    "专精特新企业数量": 1107
                },
                {
                    "资质认定城市": "深圳",
                    "高新企业数量": 5858,
                    "科技型中小企业数量": 4089,
                    "专精特新企业数量": 2587
                },
                {
                    "资质认定城市": "杭州",
                    "高新企业数量": 1337,
                    "科技型中小企业数量": 1228,
                    "专精特新企业数量": 116
                },
                {
                    "资质认定城市": "南京",
                    "高新企业数量": 1147,
                    "科技型中小企业数量": 1505,
                    "专精特新企业数量": 48
                },
                {
                    "资质认定城市": "成都",
                    "高新企业数量": 1130,
                    "科技型中小企业数量": 567,
                    "专精特新企业数量": 280
                },
                {
                    "资质认定城市": "武汉",
                    "高新企业数量": 1042,
                    "科技型中小企业数量": 758,
                    "专精特新企业数量": 79
                }
            ],  // 资质认定
        }
        
    },
}
</script>

<style scoped lang="scss">
.body{
    width: 100%;
    height: 106%;
    .line1 {
        height: 53%;
        .col{
            height: 100%;
            .item{
                position: relative;
                height: 100%;
                .module_title {
                    width: 100%;
                    height: 50px;
                    background-image: url("~img/zyqj_title.png");
                    background-size: 100% 100%;
                    font-family: YouSheBiaoTiHei;
                    font-weight: 400;
                    font-size: 25px;
                    line-height: 25px;
                    padding-left: 70px;
                    color: #fff;
                }
                .select_box{
                    position: absolute;
                    right: 0;
                    top: -15px;
                    display: flex;
                    align-items: flex-end;
                    .select{
                        width: 105px;
                        height: 32px;
                        background: rgba(104,200,250,0.08);
                        border: 1px solid #68C8FA;
                        border-radius: 6px;
                        ::v-deep .el-input--medium .el-input__inner {
                            height: 32px !important;
                            line-height: 32px !important;
                            background-color: unset !important;
                            color: #68C8FA;
                            border: none;
                        }
                        ::v-deep .el-input__suffix {
                            top: 3px;
                        }
                    }
                    .text{
                        font-size: 16px;
                        line-height: 30px;
                        color: #fff;
                        font-family: Alibaba PuHuiTi;
                        margin: 0 10px;
                    }
                }
                .gnlt_title {
                    display: flex;
                    // margin: 10px 0;
                }
                .gnlt_title > div {
                    width: 19%;
                    text-align: center;
                    color: #68c8fa;
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                }

                .szlt_title {
                    display: flex;
                    justify-content: space-between;
                    margin: 15px 0;
                }

                .szlt_title > div {
                    width: 16.5%;
                    text-align: center;
                    color: #68c8fa;
                    height: 30px;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    line-height: 20px;
                    justify-content: space-around;
                }

                .double_title {
                    line-height: 20px !important;
                    display: flex;
                    align-items: center;
                }
                .gnlt_contan_box {
                    width: 100%;
                    height: 310px;
                    overflow: auto;
                }
                .gnlt_nav {
                    display: flex;
                    margin-bottom: 15px;
                }
                .gnlt_nav > div {
                    width: 19%;
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    font-size: 16px;
                    color: #fff;
                }
                .gnlt_area {
                    background-color: #68c8fa;
                    width: fit-content;
                    padding: 0px 5px;
                    color: #0e2376;
                    margin: auto;
                    border-radius: 5px;
                    // =================
                    overflow: hidden; //超出文本隐藏
                    text-overflow: ellipsis; ///超出部分省略号显示
                    display: -webkit-box; //弹性盒模型
                    -webkit-box-orient: vertical; //上下垂直
                    -webkit-line-clamp: 1; //自定义行数
                }
                ::-webkit-scrollbar{
                    display: none;
                }
            }
        }
        
        
    }
}
</style>